<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}知识库管理系统{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#86909C',
                        'neutral-light': '#F2F3F5',
                        'neutral-dark': '#4E5969',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .nav-active {
                @apply border-l-4 border-primary bg-primary/5 text-primary;
            }
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body class="font-inter bg-gray-50 text-neutral-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-database text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">知识库管理系统</h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:block">
                    <form action="{% url 'knowledge:search' %}" method="get" class="flex items-center">
                        <input type="text" name="q" placeholder="搜索知识库..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64">
                        <i class="fa fa-search absolute left-3 text-gray-400"></i>
                    </form>
                </div>
                <button class="md:hidden text-gray-600 hover:text-primary">
                    <i class="fa fa-search text-xl"></i>
                </button>
                <div class="relative group">
                    <button class="flex items-center space-x-2 focus:outline-none">
                        <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-user"></i>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边导航 -->
        <aside class="w-16 md:w-64 bg-white shadow-sm flex flex-col transition-all duration-300">
            <nav class="flex-1 py-4 overflow-y-auto">
                <ul>
                    <li>
                        <a href="{% url 'knowledge:index' %}" class="flex items-center px-4 py-3 text-sm font-medium {% if active_page == 'index' %}nav-active{% else %}text-neutral hover:bg-gray-50{% endif %}">
                            <i class="fa fa-home w-6 text-center"></i>
                            <span class="ml-3 hidden md:block">知识库列表</span>
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'knowledge:create_collection' %}" class="flex items-center px-4 py-3 text-sm font-medium {% if active_page == 'create_collection' %}nav-active{% else %}text-neutral hover:bg-gray-50{% endif %}">
                            <i class="fa fa-plus-circle w-6 text-center"></i>
                            <span class="ml-3 hidden md:block">创建知识库</span>
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'knowledge:search' %}" class="flex items-center px-4 py-3 text-sm font-medium {% if active_page == 'search' %}nav-active{% else %}text-neutral hover:bg-gray-50{% endif %}">
                            <i class="fa fa-search w-6 text-center"></i>
                            <span class="ml-3 hidden md:block">搜索知识库</span>
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'knowledge:ai_search' %}" class="flex items-center px-4 py-3 text-sm font-medium {% if active_page == 'ai_search' %}nav-active{% else %}text-neutral hover:bg-gray-50{% endif %}">
                            <i class="fa fa-robot w-6 text-center"></i>
                            <span class="ml-3 hidden md:block">AI搜索知识库</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 内容区域 -->
        <main class="flex-1 overflow-y-auto p-4 md:p-6 bg-gray-50">
            <div class="max-w-7xl mx-auto">
                {% if messages %}
                    {% for message in messages %}
                        <div class="bg-{{ message.tags }}-100 border border-{{ message.tags }}-400 text-{{ message.tags }}-700 px-4 py-3 rounded relative" role="alert">
                            <span class="block sm:inline">{{ message }}</span>
                        </div>
                    {% endfor %}
                {% endif %}

                {% if error %}
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" role="alert">
                        <i class="fa fa-exclamation-circle mr-2"></i>{{ error }}
                    </div>
                {% endif %}

                {% block content %}{% endblock %}
            </div>
        </main>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4 text-center text-sm text-neutral">
            <p>© 2023 知识库管理系统 - 专业知识管理解决方案</p>
        </div>
    </footer>

    {% block extra_js %}{% endblock %}
</body>
</html>